<template>
  <div class="stationInfo-page">
    <div class="station_info">
      <div class="left_info">
        <table class="tableInfo">
          <tbody>
          <tr>

            <td class="fieldName">预警类型</td>
            <td>
              <template v-if="state.infoData?.methodType == 2">叫应预警</template>
              <template v-if="state.infoData?.methodType !=2">站点预警</template>
            </td>
            <td class="fieldName">站点名称</td>
            <td>{{ state.infoData !== null ? state.infoData.stnm : "" }}</td>
          </tr>
          <tr>
            <td class="fieldName">发送时间</td>
            <td>{{ state.infoData !== null ? dayjs(state.infoData.createTime).format('YYYY-MM-DD HH:mm:ss') : "" }}</td>
            <td class="fieldName">预警发生时间</td>
            <td>{{ state.infoData !== null ? dayjs(state.infoData.tm).format('YYYY-MM-DD HH:mm:ss') : "" }}</td>
          </tr>
          <tr>
            <td class="fieldName">预警级别</td>
            <td>
                <span v-if="state.infoData !== null">
                  <template v-if="state.infoData.warnLevel == 1">极高风险</template>
                  <template v-if="state.infoData.warnLevel !=1">高风险</template>
                </span>
            </td>
            <td class="fieldName">通信方式</td>
            <td>
                <span v-if="state.infoData !== null">
                  <template v-if="state.infoData.msgType == 1">短信</template>
                  <template v-if="state.infoData.msgType == 2">电话</template>
                  <template v-if="state.infoData.msgType == 3">电话和短信</template>
                </span>
            </td>
          </tr>
          <tr>
            <td class="fieldName">发送对象</td>
            <td colspan="3">{{ state.infoData !== null ? state.infoData.target : "" }}</td>
          </tr>
          <tr>
            <td class="fieldName">短信内容、电话内容</td>
            <td colspan="3">{{ state.infoData !== null ? state.infoData.content : "" }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="tabs-container">
      <a-tabs>
        <a-tab-pane key="1" tab="短信回执记录">
          <a-table
            :columns="state.tableColumns1"
            :data-source="state.dataSource1"
            :pagination="false"
            size="small"
            bordered
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'errorCode'">
                <span class="redText wptnSpan" v-if="record.errorCode == 'DELIVRD'"> 成功 </span>
                <span class="blueText wptnSpan" v-if="record.errorCode != 'DELIVRD'"> 失败 </span>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="电话语音回执记录">
          <a-table
            :columns="state.tableColumns2"
            :data-source="state.dataSource2"
            :pagination="false"
            size="small"
            bordered
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'callResult'">
                <span class="redText wptnSpan" v-if="record.callResult == '1'"> 已接听 </span>
                <span class="blueText wptnSpan" v-if="record.callResult == '0'"> 无法接通 </span>
                <span class="greenText wptnSpan" v-if="record.callResult == '2'"> 未接听 </span>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch, onMounted } from "vue";

import { getLogs } from "@/api/warningInfo/baseData";
import dayjs from 'dayjs';

defineOptions({ name: "StationInfo" });
const state = reactive({
  tabActive: "1",
  infoData: null,
  chartOption: null,
  tableColumns1:[
    { dataIndex: "errorCode", title: "发送状态", align: "center" },
    { dataIndex: "mobile", title: "电话号码", align: "center" },
    { dataIndex: "submitDate", title: "提交时间", align: "center" },
    { dataIndex: "receiveDate", title: "接收时间", align: "center" },
    { dataIndex: "reportStatus", title: "发送状态码", align: "center" },
  ],
  tableColumns2:[
    { dataIndex: "callingNumber", title: "主叫号码", align: "center" },
    { dataIndex: "calledNumber", title: "被叫号码", align: "center" },
    { dataIndex: "connectionTimeStr", title: "呼叫开始时间/接通时间", align: "center" },
    { dataIndex: "talkTime", title: "通话时长(秒)", align: "center" },
    { dataIndex: "callResult", title: "呼出结果", align: "center" },
  ],
  dataSource1:[],
  dataSource2:[]
});

const props = defineProps({
  data: { type: Object },
});

// watch(
//   () => props.data,
//   async () => {
//     await getStationDataInfo();
//   }
// );

const getStationDataInfo = async () => {
  console.log('-----------------------------',props.data)
  if (props.data) {
    state.infoData = props.data;
    console.log('-----------',state.infoData);
    const logs = await getLogs({"msgId":props.data.id});
    console.log('-----------logslogslogs',logs);
    state.dataSource1 = logs.msgList;
    state.dataSource2 = logs.phoneList;
  }
};

onMounted(async () => {
  state.dataSource1 = [];
  state.dataSource2 = [];

  setTimeout(async () => {
    await getStationDataInfo();
  }, 500);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;

  .station_info {
    width: 100%;
    margin-bottom: 16px;

    .left_info {
      width: 100%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          color: #111;
        }
      }
    }
  }

  .tabs-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    :deep(.ant-tabs) {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-tabs-content {
        flex: 1;
        overflow: hidden;

        .ant-tabs-tabpane {
          height: 100%;
          overflow: auto;
        }
      }
    }
  }
}

// 移除原来的.carousel相关样式，因为它们在这个组件中似乎没有使用
</style>
